<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>君乐宝酸奶管理系统-管理登录</title>
<link rel="stylesheet" href="${ctx}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/my.css">
<!--[if lt IE 9]>
  <script>window.location.href="browser.html"</script>
<![endif]-->
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption,
	tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

body{
	font-size: 12px;
	font-family: MicroSoft YaHei, arial, sans-serif;
	overflow: hidden;
	background: #ddd;
}

#box {
	width: 400px;
	height: 360px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;
}

#logo {
	width: 100%;
	height: 22%;
	font-size: 40px;
	font-weight: 800;
	text-align: center;
	color: #FFF;
}

#box2 {
	width: 100%;
	height: 78%;
	background-color: rgba(255, 255, 255, 0.3);
}

input {
	width: 268px;
	height: 32px;
	border: 1px solid #ffffff;
	background: rgba(255, 255, 255, 0);
	font-size: 14px;
	color: #AA5A04;
	outline: none;
	margin: 15px 60px 0 60px;
	padding: 0 5px;
}

#lname {
	margin-top: 40px;
}

#cc {
	width: 168px;
	margin-right: 10px;
}

#img_cc {
	width: 85px;
	height: 34px;
	padding: 0px;
	vertical-align: bottom;
}

button {
	width: 278px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 18px;
	font-weight: 800;
	background: rgba(26, 181, 255, 0.5);
	color: #FFF;
	border: none;
	margin: 15px 60px 10px 60px;
	cursor: pointer;
	font-family: MicroSoft YaHei, arial, sans-serif;
	outline: none;
}

button:hover {
	background: rgba(26, 181, 255, 0.8);
}

#msg{
width: 268px;
height: 32px;
line-height: 32px;
border: none;
background: rgba(255, 255, 255, 0);
font-size: 16px;
font-weight:800;
color: #cc0000;
outline: none;
margin: 0 60px;
padding: 0 5px;
text-align: center;
}

#bottom {
	width: 100%;
	height: 20px;
	line-height: 20px;
	position: fixed;
	bottom: 0px;
	background: rgba(4, 4, 4, 0.3);
	text-align: center;
	font-size: 12px;
	color: #FFF;
}
</style>
</head>
<body>
	<img src="${ctx}/img/login.jpg" style="width:100%;height:100%;" />

	<div id="box">
		<div id="logo">君乐宝酸奶管理系统</div>
		<div id="box2">
			<form action="${ctx}/login.jhtml" id="loginForm" method="post">
				<input type="text" id="lname" name="lname" placeholder="用户名"
					required="required" /> 
				<input type="password" id="pwd" name="pwd"
					placeholder="密码" required="required" />
				<input type="text" id="cc"
					name="cc" placeholder="验证码" required="required" />
				<img src="${ctx}/yzm.jhtml" name="cc" id="img_cc" 
					title="点击图片，更换图片" style="cursor: pointer;"/>
				<button type="submit">登录</button>
				<div id="msg">${msg}</div>
				<c:remove var="msg" scope="session"/>
			</form>
		</div>
	</div>
	<div id="bottom">Copyright &copy; 2017高稀毕业设计 </div>
	
	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<script>
		$("#img_cc").click(function(){
			var src = $(this).attr("src");
			if(src.indexOf("?") != -1){
				src = src.substring(0, src.indexOf("?"));	
			}
			$(this).attr("src", src + "?d=" + new Date().getTime());
		});
	</script>
</body>
</html>